<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" 
	import="java.util.*, com.bean.library.AppraisedPaper, com.bean.library.AppraisedSubject ,
	com.bean.library.AppraisedOption, com.bean.library.Option, com.bean.library.Subject,com.bean.library.UserOption" %>
<jsp:useBean id="partialAppraisedPaper" class="com.bean.library.AppraisedPaper" scope="session"></jsp:useBean>
<jsp:useBean id="userPaper" class="com.bean.library.UserPaper" scope="session"></jsp:useBean>
<jsp:useBean id="paper" class = "com.bean.library.Paper" scope="session"></jsp:useBean>
<jsp:useBean id="student" class = "com.bean.library.Student" scope="session"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Grade Info</title>
    <link href="../css/grade.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/common.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.animate-colors-min.js"></script>
    <script type="text/javascript" src="../scripts/navi_common.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#submit_paper").hover(function () {
                $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 500, queue: false });
            }, function () {
                $(this).animate({ backgroundColor: '#771347' }, { speed: 500, queue: false });
            });

            var up_hrefColor = $("#href_up").css('color');
            var down_hrefColor = $("#href_down").css('color');
            $("#page_up").hover(function () {
            	$("#submit_page_num").val(parseInt($("#page_num").val(),10)-1);
                $("#page_up_text").animate({ color: '#000000' },0);
            }, function () {
                $("#page_up_text").animate({ color: up_hrefColor }, 0);
            });

            $("#page_down").hover(function () {
            	$("#submit_page_num").val(parseInt($("#page_num").val(),10)+1);
                $("#page_down_text").animate({ color: '#000000' }, 0);
            }, function () {
                $("#page_down_text").animate({ color: down_hrefColor }, 0);
            });
            
            /**********  判断翻页      *************/
            var page_num = parseInt($("#page_num").val(),10);
            var max_page_num = parseInt($("#max_page_num").val(),10);
            
            $("#page_up").click(function(){
            	if(page_num <= 1){
            		return false;
            	}
            	$("#submit_form").submit();
            });
            $("#page_down").click(function(){
            	if(page_num >= max_page_num){
            		return false;
            	}
            	$("#submit_form").submit();
            });
        });
    </script>
</head>
<body>
<%
	String paperTitle = partialAppraisedPaper.getPaperName();
	int startIndex = partialAppraisedPaper.getStartIndex();
	int prePageNum = startIndex;
	int nextPageNum = startIndex + 2;
	int curPageNum = startIndex + 1; 
	int totalSize = paper.getSubjectList().size();
	int maxPageNum = (totalSize%10==0)?(totalSize/10):(totalSize/10 + 1);
	String score = String.valueOf(partialAppraisedPaper.getScore());
	String studentName = student.getStuName();
%>
<div id="bigContent">
<div id="head">
    <div id="title">
        <div class="title_left">
            <div class="titleText">Students Online Exam Platform</div>
        </div>
        <div class="title_right">
            <div class="avatar"><img src="../image/noavatar.jpg" alt="../image/noavatar.jpg"/></div>
            <div class="userState">
                <div class="userState_big"><a href="#"><%=studentName%></a></div>
                <div class="userState_small"><a href="/Exam1/servlet/SLogoutServlet">logout</a></div>
            </div>
        </div>
    </div>
    <form id="navi_form" action="/Exam1/servlet/SNaviSelectServlet">
	    <div id="navi">
	        <div class="navi_top">
	            <ul class="all_navi">
	            	<li id="navi1" class="each_navi navi1">Examination</li>
	                <li id="navi2" class="each_navi navi2">Practice Test </li>
	                <li id="navi3" class="each_navi navi3">Free Q&A</li>
	            </ul>
	        </div>
	        <div class="navi_bottom">
	            <ul class="all_terms">
	            	<li class="each_term term1">freshman 1</li>
	                <li class="each_term term2">freshman 2</li>
	                <li class="each_term term3">sophomore 1</li>
	                <li class="each_term term4">sophomore 2</li>
	                <li class="each_term term5">junior 1</li>
	                <li class="each_term term6">junior 2</li>
	            </ul>
	        </div>
	    </div>
       	<input type="hidden" value="" name="test_type" id="test_type"/>
        <input type="hidden" value="" name="which_term" id="which_term"/>
    </form>
</div>
<div id="content"  class="boxShadow">
    <div id="test_title">
        <div class="test_title_content"><%=paperTitle %></div>
    </div>
    <div id="test_result" class="test_result">
        <div id="test_grade" class="test_score">Your Final Score:<span class="show_score"><%=score %></span></div>
    </div>
    <div class="test_result_notice">
    	<div class="test_result_notice_title">Notice:</div>    
		<div class="test_result_notice_text">The following subject list is the paper answer, you can get what you selected and the
		correct answer(highlight)
		</div>
    </div>
    <div id="subjects">
  		<%
  			ArrayList<Subject> appraisedSubList = partialAppraisedPaper.getSubjectList();
			Iterator<Subject> appIt = appraisedSubList.iterator();
    		int subNum = 0;
    		while (appIt.hasNext())
    		{
    			subNum++;
    			int subNo = startIndex*10 + subNum; 
    			AppraisedSubject appSub = (AppraisedSubject)appIt.next();
               	ArrayList<Option> appOptList = appSub.getOptList();
               	Iterator<Option> appOptIt = appOptList.iterator();
               	String rightOrWrong = null;
               	if(appSub.isRight())
               		rightOrWrong = "Correct";
               	else
               		rightOrWrong = "Incorrect";
    	%>
        <div class="each_problem">
            <div class="each_problem_title">
                <div class="each_peoblem_no"><%=subNo+"."%></div>
                <div class="each_problem_title_content"><%=appSub.getSubjectContent() %></div>
                <div class="each_problem_incorrect"><%=rightOrWrong %></div>
            </div>
            <%if(!appSub.isMulti()){ %>
            <div class="each_problem_content_radio">
                <ul class="each_problem_content_list">
                <%              	
                	int optNum = 0;
                	while(appOptIt.hasNext()){
                		char optChar = (char)(optNum+65);
                		AppraisedOption opt = (AppraisedOption)appOptIt.next();
                		String optContent = opt.getOptContent();
                		String optValue = opt.getOptValue();
                		String optName = opt.getOptName();
               			if(opt.isChecked()){
               				if(opt.isRight()){
                %>
                	<li class="each_problem_content correct_option">
                        <input id="<%=optValue %>" type="radio" value="<%=optValue %>" name="<%=optName %>" checked="checked"/>
                        <label for="<%=optValue %>"><%=optChar+"."+optContent %></label>
                    </li>
                    <%}else{ %>
                    <li class="each_problem_content">
                        <input id="<%=optValue %>" type="radio" value="<%=optValue %>" name="<%=optName %>" checked="checked"/>
                        <label for="<%=optValue %>"><%=optChar+"."+optContent %></label>
                    </li>
                    <%}}else{
                    	if(opt.isRight()){	
                   	%>
                	<li class="each_problem_content correct_option">
                        <input id="<%=optValue %>" type="radio" value="<%=optValue %>" name="<%=optName %>"/>
                        <label for="<%=optValue %>"><%=optChar+"."+optContent %></label>
                    </li>                    
                    <%}else{ %>
                	<li class="each_problem_content">
                        <input id="<%=optValue %>" type="radio" value="<%=optValue %>" name="<%=optName %>"/>
                        <label for="<%=optValue %>"><%=optChar+"."+optContent %></label>
                    </li>
                    <%}}optNum++;} %>                                        
                </ul>
            </div>
            <%}else{ %>
            <div class="each_problem_content_checkbox">
                <ul class="each_problem_content_list">
                <% 
                	int optNum = 0;
                	while(appOptIt.hasNext()){
                		char optChar = (char)(optNum+65);	
                		AppraisedOption opt = (AppraisedOption)appOptIt.next();
                		String optContent = opt.getOptContent();
                		//String optValue = opt.getOptValue();
                		String optName = opt.getOptName();
                		if(opt.isChecked()){
                			if(opt.isRight()){
                %>
  	                <li class="each_problem_content correct_option">
                        <input id="<%=optName %>" type="checkbox" name="<%=optName%>" checked="checked"/>
                        <label for="<%=optName %>"><%=optChar+"."+optContent %></label>
                    </li>
                    <%}else{ %>
  	                <li class="each_problem_content">
                        <input id="<%=optName %>" type="checkbox" name="<%=optName%>" checked="checked"/>
                        <label for="<%=optName %>"><%=optChar+"."+optContent %></label>
                    </li>                    
              		<%}}else{
              			if(opt.isRight()){
           			%>
  	                <li class="each_problem_content correct_option">
                        <input id="<%=optName %>" type="checkbox" name="<%=optName%>"/>
                        <label for="<%=optName %>"><%=optChar+"."+optContent %></label>
                    </li>              		
              		<%}else{ %>
  	                <li class="each_problem_content">
                        <input id="<%=optName %>" type="checkbox" name="<%=optName%>"/>
                        <label for="<%=optName %>"><%=optChar+"."+optContent %></label>
                    </li>
                    <%}}optNum++;} %>                		
	           	</ul>
        	</div>
			<%} %>
        </div>
		<%} %>        
    </div>
    <form id="submit_form" action="/Exam1/servlet/CheckGradeServlet" method="get">
	    <div id="operate">
	        <div id="page_turning">
	            <div id="page_up_down">
	                <div id="page_up">
	                    <div id="page_up_text">previous page</div>
	                </div>
	                <div id="page_down">
	                    <div id="page_down_text">next page</div>
	                </div>              
	            </div>
	            <input id="page_num" type="hidden" value="<%=curPageNum%>"/>
	            <input id="max_page_num" type="hidden" value="<%=maxPageNum%>"/>
	            <input id="submit_page_num" name="submit_page_num" type="hidden" value=""/> 
	        </div>
	    </div>
	</form>
</div>
</div>
</body>
</html>